<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Niivue Document</title>
    <link rel="stylesheet" href="niivue.css" />
    <style>
      .preview-image {
        max-height: 50px;
        max-width: 150px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
    </style>
  </head>

  <body style="font-family: sans-serif">
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <div class="dropdown">
        <button class="dropbtn">
          File
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a class="viewBtn" id="SaveDocument">Save Document</a>
          <a class="viewBtn divider" id="Recent">Recent</a>
          <ul id="previewImages" style="list-style-type: none"></ul>
          <a class="linker divider" href="https://github.com/niivue/niivue"
            >About</a
          >
        </div>
      </div>
      <div class="dropdown">
        <button class="dropbtn">
          Volume
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a class="viewBtn" id="ToggleHippocampus">Toggle Hippocampus</a>
        </div>
      </div>
      <div class="dropdown">
        <button class="dropbtn">
          Help
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <section class="help-text">
            <p>
              NiiVue supports saving a collection of images and drawing to a
              document.
            </p>
            <p>Click File and then Save Document.</p>
          </section>
        </div>
      </div>
    </header>
    <!-- demo 1 -->
    <main>
      <div id="demo1" style="display:flex; flex: 1;">
        <canvas id="gl1" style="width: 800px; height: 400px"> </canvas>
      </div>
    </main>

    <script type="module">
      import * as niivue from "../dist/index.js";

      function toggleHippo() {
        let buttonElem = document.getElementById("ToggleHippocampus");
        if (isHippoShowing) {
          nv1.removeVolumeByUrl(url);
          buttonElem.innerText = "Add Hippocampus";
          isHippoShowing = false;
        } else {
          nv1.addVolumeFromUrl({ url, colormap: "bluegrn" });
          buttonElem.innerText = "Remove Hippocampus";
          isHippoShowing = true;
        }
      }

      function loadDocument(index) {
        nv1.loadDocument(documents[index]);
      }

      /**
       * @param {String} HTML representing a single element
       * @return {Element}
       */
      function htmlToElement(html) {
        var template = document.createElement("template");
        html = html.trim(); // Never return a text node of whitespace as the result
        template.innerHTML = html;
        return template.content.firstChild;
      }

      function addPreview(doc) {
        var ul = document.getElementById("previewImages");
        var liHTML = `<li><img class="preview-image" onclick="loadDocument(${
          documents.length - 1
        })" src="${doc.previewImageDataURL}"/></li>`;
        var liElem = htmlToElement(liHTML);
        ul.appendChild(liElem);
      }

      async function onButtonClick(event) {
        switch (event.target.id) {
          case "SaveDocument":
            nv1.saveDocument("niivue.basic.nvd");
            break;
          case "ToggleHippocampus":
            toggleHippo();
            break;
        }
      }

      const url = "../images/hippo.nii.gz";
      var isHippoShowing = false;
      var nv1 = new niivue.Niivue();
      await nv1.attachTo("gl1");

      var buttons = document.getElementsByClassName("viewBtn");
      for (let i = 0; i < buttons.length; i++)
        buttons[i].addEventListener("click", onButtonClick, false);

      var documents = [];

      var documentUrls = [
        "../images/niivue.basic.nvd",
        "../images/niivue.drawing.nvd",
        "../images/niivue.mesh.nvd",
      ];

      var docsLoadedCount = 0;
      for (const documentUrl of documentUrls) {
        console.log("loading " + documentUrl);
         
        niivue.NVDocument.loadFromUrl(documentUrl).then((doc) => {
          documents.push(doc);
          console.log("adding preview");
          console.log(doc.opts);
          addPreview(doc);
          // if this is our first document load it into niivue
          if(!docsLoadedCount) {
            nv1.loadDocument(doc);
          }
          docsLoadedCount++;
        });

      }
      window.loadDocument = loadDocument;
    </script>
  </body>
</html>
